<template>
  <div class="header">
    <div style="height: 25px;width: 100%;display: flex;justify-content: right" data-wails-drag>
      <div data-wails-no-drag style="display: flex">
        <div class="hover1" style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;"
             @click="miniWindowBtn">
          <LineOutlined style="color: aliceblue;font-size: 15px"/>
        </div>
        <div class="hover1" style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;"
             @click="maxWindowBtn">
          <RetweetOutlined v-if="maxStatus" style="color: aliceblue;font-size: 12px"/>
          <BorderOutlined v-else style="color: aliceblue;font-size: 12px"/>
        </div>
        <div class="hover2"
             style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;border-radius:0 6px 0 0"
             @click="closeBtn">
          <CloseOutlined style="color: aliceblue;font-size: 15px"/>
        </div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
import {BorderOutlined, CloseOutlined, LineOutlined,RetweetOutlined} from "@ant-design/icons-vue"
import {ref} from "vue";

export default {
  components: {
    CloseOutlined,
    BorderOutlined,
    LineOutlined,
    RetweetOutlined
  },
  setup() {
    let maxStatus = ref(false)
    const miniWindowBtn = () => {
      // window.go.main.App.WindowMinimise()
      window.runtime.WindowMinimise()
    }
    const maxWindowBtn = () => {
      if (maxStatus.value){
        window.runtime.WindowUnmaximise()
        maxStatus.value = false
      }else{
        window.runtime.WindowMaximise()
        maxStatus.value = true
      }
    }
    const closeBtn = () => {
      window.runtime.Quit()
    }

    return {
      maxStatus,
      miniWindowBtn,
      maxWindowBtn,
      closeBtn
    }
  }
}
</script>
<style>
html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

.header {
  height: 100%;
  width: 100%;
  background: #282b3e;
  border-radius: 6px;
  border: 0;
}

.hover1:hover {
  background: #a3a3a3;
}

.hover2:hover {
  background: #b20000;
}
</style>
